<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-left">
        <view class="global-header-left" @click="goBack">
          <view class="global-back-button">
            <text class="global-back-icon">‹</text>
          </view>
          <text class="global-back-text">返回</text>
        </view>
      </view>
      <view class="header-center">
        <text class="header-title">门店位置</text>
      </view>
    </view>

    <!-- WebView 内容区域 -->
    <view class="webview-container">
      <web-view
        :src="webviewUrl"
        @message="handleMessage"
        @load="handleLoad"
        @error="handleError"
      ></web-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // webviewUrl: 'https://cdn.pnup-hd.tcssyw.com/shop/index.html?f=jsmap&s=null&v=null',
      webviewUrl: 'https://pls.tcssyw.com/ticai/js/page/oauth-foot.html?redirecturi=https%3A%2F%2Fphd.tcssyw.com%2Fshop%2Fnearby.html%3Ff%3Djsmap%26s%3Dmp%26v%3D251112',
      // webviewUrl:
      //   "https://pls.tcssyw.com/ticai/js/page/oauth-foot.html?redirecturi=https%3A%2F%2Fcdn.pnup-hd.tcssyw.com%2Fshop%2Fnearby.html%3Ff%3Djsmap",
      currentUrl: "", // 当前webview的URL
      messageCount: 0, // 收到的消息数量
      lastMessage: null, // 最后收到的消息
    };
  },
  onLoad(options) {
    // 如果通过参数传入URL，使用参数中的URL
    if (options.url) {
      this.webviewUrl = decodeURIComponent(options.url);
    }
  },

  /**
   * 分享时获取当前webview的URL
   */
  onShareAppMessage(options) {
    console.log("分享时的webview URL:", options.webViewUrl);
    if (options.webViewUrl) {
      this.currentUrl = options.webViewUrl;
    }

    return {
      title: "门店位置",
      path:
        "/pages/store/location?url=" +
        encodeURIComponent(options.webViewUrl || this.webviewUrl),
    };
  },

  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.reLaunch({
        url: "/pages/index/index",
      });
    },

    /**
     * 监听webview发送的消息
     */
    handleMessage(e) {
      console.log("收到webview消息:", e.detail);
      this.messageCount++;
      this.lastMessage = e.detail.data;

      // 处理消息
      const messages = e.detail.data || [];
      messages.forEach((message) => {
        console.log("消息内容:", message);
      });
    },

    /**
     * webview加载完成
     */
    handleLoad(e) {
      console.log("webview加载完成:", e);
    },

    /**
     * webview加载错误
     */
    handleError(e) {
      console.error("webview加载错误:", e);
      uni.showToast({
        title: "页面加载失败",
        icon: "none",
      });
    },
  },
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #93d3f4;
  display: flex;
  flex-direction: column;
  padding: 0;
  --header-height: 184rpx; /* 头部高度 */
}

/* 顶部导航栏 */
.header {
  background: #ffffff;
  padding: var(--status-bar-height, 44rpx) 30rpx 20rpx;
  padding-top: 104rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1000;
  height: 184rpx;
  box-sizing: border-box;
}

.header-left {
  flex: 1;
}

.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #0071bc;
}

/* 全局返回按钮样式 */
.global-back-button {
  width: 60rpx;
  height: 60rpx;
  background: #0071bc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15rpx;
}

.global-back-icon {
  color: white;
  font-size: 40rpx;
  font-weight: bold;
  line-height: 1;
}

.global-back-text {
  color: #0071bc;
  font-size: 28rpx;
  font-weight: bold;
}

.global-header-left {
  display: flex;
  align-items: center;
}

/* WebView 容器 */
.webview-container {
  flex: 1;
  width: 100%;
  height: calc(100vh - var(--header-height));
  position: relative;
  overflow: hidden;
}
</style>
